{% extends "base.html" %}

{% block extra_libraries %}
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
{% endblock %}

{% block sidebar %}
<div id="sidebar">
    <div id="users">
        {% for user in online_users %}
        <div class="clearboth user"> 
            <div class="user_icon float_left">
                <img src="static/images/circle_green.png"> 
            </div>
            <div class="user_name">{{user}}</div>
        </div>
        {% endfor %}
    </div>
    <div id="events">
    {% for event in events %}
        <div id="id_event_{{event.key.id}}" class="event">
            <span class="person">{{event.author.nickname}}</span> <span>{{event.summary}}</span>
            <div>
                <span class="date">{{event.date|date:"D, M j, Y H:m:s" }}</span>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<div id="chat_container" class="round_border min">
    <div>
        <span>Chat...</span>

        <span class="float_right" id="id_m">Max-Min</span>
    </div>
    <div id="messages">
        {% for message in iteration.planning_messages %}
        <div>
            <span class='user'>{{ message.user.nickname }}</span><pre class='msg'>{{ message.text }}</pre>
        </div>
        {% endfor %}
    </div>
    <div class="text_form">
        <form action="/global_chat" method="post" id="chat_form">
            <input type="hidden" name="iteration_id" value="{{iteration.key.id}}">
            <textarea name="message" id="id_text_chat" title="Write a meesage..." placeholder="Write a message..." class="text ui-widget-content ui-corner-all" ></textarea>
        </form>
    </div>
</div>

<div id="error-message" title="Error!">
    <span>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 1px 7px 50px 0;"></span>
        <span id="warning_msg"></span>
    </span>
</div>

{% endblock %}

{% block javascript %}
<script type="text/javascript">
    $(document).ready(function(){
        var callBackMethods = {
            chat: function(data) {
                var str ="<div><div><span class='user'>"+data.user+"</span><pre class='msg'>"+data.message+'</pre></div></div>';
                var html = $(str).html();
                $('#messages').append(html);
            },
            add_user: function(data) {
                var users = $("#users div.user:contains('"+data.user+"')");
                if (users.length == 0) {
                    var str ='<div><div class="clearboth user"> \n\
                             <div class="user_icon ui-icon_ _ui-icon-person float_left">\n\
                             <img src="static/images/circle_green.png"></div> \n\
                             <div class="user_name">'+data.user+'</div></div></div>';
                    var html = $(str).html();
                    $('#users').append(html);
                }
            },
            remove_user: function(data) {
                // $("#users div.user:contains('"+data.user+"')").remove();
            },
            add_history_event: function(data) {
                var html = $(data.html_event).html();
                $('#events').prepend(html);
                highlight($('#id_event_' + data.id_event));
            }
        };
        addCallBackMethods(callBackMethods);
        var token = '{{ token }}';
        setChannel(token);

        $('#id_text_chat').keydown(function(event) {
            if (event.keyCode == 13) {
                $( this ).parent().submit();
                return false;
            }
        });

        $("#chat_form").submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            message = $form.find( 'textarea[name="message"]' ).val(),
            iteration_id = $form.find( 'input[name="iteration_id"]' ).val(),
            url = $form.attr( 'action' );
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: { message: message, iteration_id: iteration_id },
                success: function(data) {
                    $form.find( 'textarea[name="message"]' ).val('');
                }
            });

        });
        $('#id_m').click(function(event) {
            event.preventDefault();
            $( '#chat_container' ).toggleClass('min');
        });
        
        $( "#error-message" ).dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

 /*       $( "#load" ).dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Close: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
				
            }
        });
*/
        $( 'a.index' ).click( function( event ) {
            console.log('recargando........................ indexxxx')
            event.preventDefault();
            var url = $( this ).attr('href');
            loadContent( url );
        });
        var url = '{{page}}';
        console.log('page index...:'+url);
        loadContent(url);
		
    });
</script>
{% endblock %}
